﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>大数据201</title>
	<link rel="icon" href="static//img/iocn.png">
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
{#    <script src="/static/js/echarts.min.js"></script>#}
{#    <script type="text/javascript" src="/static/js/jquery.min.js"></script>#}
    <script type="text/javascript" src="/static/js/echarts-wordcloud.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            /*background-color: #eaedf1;*/
        }
        section nav{
            text-align: center;
            height: 50px;
            background-color: rgb(238, 244, 249);
            line-height: 50px;

        }
        section nav a{
            padding: 50px;
        }
        body{
            background-color: #eaedf1;
        }
        main{
            position: relative;
            width: 80%;
            margin: 0 auto;
        }
    </style>
</head>
<body>

	<section>
		<nav>
			<a href="/index">首页</a>
			<a href="/bar">柱状图</a>
			<a href="/add">组合</a>
			<a href="/map">地图</a>
			<a href="/web">网站建设</a>
		</nav>
		<main>
                <form action = "/add" method = "POST">
                 <p>分类：
                    {% for fenlei in fenleis %}
                        <input type = "radio" class="radio_type" name = "fenlei" value="{{ fenlei }}"/>{{ fenlei }}
                    {% endfor %}
                 </p>
                 <p>区域：
                     {% for city in citys %}
                        <input type = "radio" class="radio_type" name = "city" value="{{ city }}"/>{{ city }}
                     {% endfor %}
                 </p>

                 <p><input type = "submit" value = "提交" /></p>
              </form>
            <div id="Sunburst" style="width:1000px; height:600px;"></div>
            <div id="add_pie" style="width:1000px; height:600px;"></div>
            <div id="wordcloud" style="width:1000px; height:650px;"></div>
            <div id="add_rader" style="width:1000px; height:650px;"></div>
            <p>
                正确分区应为:<br>
                华东（上海市、江苏省、浙江省、安徽省、江西省、山东省、福建省、台湾省）<br>
                华北（北京市、天津市、山西省、河北省、内蒙古自治区中部）<br>
                华中（河南省、湖北省、湖南省）<br>
                华南（广东省、广西壮族自治区、海南省、香港特别行政区、澳门特别行政区）<br>
                西南（重庆市、四川省、贵州省、云南省、西藏自治区）<br>
                西北（陕西省、甘肃省、青海省、宁夏回族自治区、新疆维吾尔自治区、内蒙古自治区西部阿拉善盟）<br>
                东北（黑龙江省、吉林省、辽宁省、内蒙古东部）<br>
            </p>
		</main>
	</section>


</body>
<script type="text/javascript">
        $(
            function () {
                var chart = echarts.init(document.getElementById('Sunburst'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/Sunburst",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )
        $(
            function () {
                var chart = echarts.init(document.getElementById('add_pie'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/add_pie",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )
        $(
            function () {
                var chart = echarts.init(document.getElementById('add_rader'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/add_rader",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )
</script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart_Cloud = echarts.init(document.getElementById('wordcloud'));
    // 指定图表的配置项和数据
    var option_Cloud = {{ Cloud_options | safe }};

    // 使用刚指定的配置项和数据显示图表。
    myChart_Cloud.setOption(option_Cloud);

</script>

</html>